<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Education &mdash; Free Website Template, Free HTML5 Template by freehtml5.co</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
	<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
	

	

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/magnific-popup.css">

	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/owl.carousel.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/owl.theme.default.min.css">

	<!-- Flexslider  -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/flexslider.css">

	<!-- Pricing -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/pricing.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style2.css">

	<!-- Modernizr JS -->
	<script src="${pageContext.request.contextPath }/js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>
		
	<div class="fh5co-loader"></div>
	
	<div id="page">
	<nav class="fh5co-nav" role="navigation">
		<div class="top">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 text-right">
						<p class="num"><a href="${pageContext.request.contextPath }/userInfo/seeInfo.do">我的账户</a></p>
						<p class="num"><a href="#">站内信</a></p>
					</div>
				</div>
			</div>
		</div>
		<div class="top-menu">
			<div class="container">
				<div class="row">
					<div class="col-xs-2">
						<div id="fh5co-logo"><a href="#"><i class="icon-study"></i>开啃<span>.</span></a></div>
					</div>
					
					<div class="col-xs-4">

						<form action="${pageContext.request.contextPath }/goods/getGoodsByName.do">
	
							<input type="text" placeholder="Search here..." name="name">
							<input type="submit" value="搜索">
						
						</form>

					</div>
					<div class="col-xs-6 text-right menu-1">
						<ul>
							<li class="active"><a href="${pageContext.request.contextPath }/goods/shouye.do">首页</a></li>
							<li><a href="#">商品上新</a></li>
							<li class="has-dropdown"><a href="#">商品分类</a>
							<ul class="dropdown">
							<li><a href="${pageContext.request.contextPath }/goods/getWenxue.do">文学小说</a></li>
							<li><a href="${pageContext.request.contextPath }/goods/getSheke.do">社科图书</a></li>
							<li><a href="${pageContext.request.contextPath }/goods/getErtong.do">儿童图书</a></li>
							<li><a href="${pageContext.request.contextPath }/goods/getJiaoxue.do">教学教辅</a></li>
						    </ul></li>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">联系我们</a></li>
							<li class="btn-cta"><a href="${pageContext.request.contextPath }/cart/seeCart.do"><span>购物车</span></a></li>

						</ul>
					</div>
				</div>
				
			</div>
		</div>
	</nav>
	
	<aside id="fh5co-hero">
		<div class="flexslider">
			<ul class="slides">
		   	<li style="background-image: url(${pageContext.request.contextPath}/images/img_bg_1.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text" style="margin-top: 250px">
			   				<div class="slider-text-inner">
			   				<h1>The Roots of Reading are Bitter, But the Fruit is Sweet</h1>
									<h2>welcome to 开啃</h2>
									<p><a class="btn btn-primary btn-lg" href="#">Start eading Now!</a></p>
			   				</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>
		   	<li style="background-image: url(${pageContext.request.contextPath}/images/img_bg_2.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text" style="margin-top: 250px">
			   				<div class="slider-text-inner">
			   						<h1>Love is ever the beginning of knowledge as fire is of light</h1>
								<h2>welcome to 开啃</h2>
								<p><a class="btn btn-primary btn-lg" href="#">Start eading Now!</a></p>
			   				</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>
		   			<li style="background-image: url(${pageContext.request.contextPath}/images/img_bg_3.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text" style="margin-top: 250px">
			   				<div class="slider-text-inner">
			   					<h1>Books are to mankind what memory is to the individual</h1>
								<h2>welcome to 开啃</h2>
								<p><a class="btn btn-primary btn-lg" href="#">Start eading Now!</a></p>
			   				</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>   	
		  	</ul>
	  	</div>
	</aside>
	
	<div id="fh5co-course-categories">
		<div class="container">
			
			
		</div>
	</div>
		<div id="fh5co-course-categories">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
				
				</div>
			</div>
			<div class="row">

			</div>
		</div>
	</div>
	<div id="fh5co-course-categories">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2>书籍分类</h2>
					<p>每一本书都有他的归属，归属于某个精神的巢穴，生命的禅堂，也归属于某个你</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3 col-sm-6 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-shop"></i>
						</span>
						<div class="desc">
							<h3><a href="#">文学小说</a></h3>
							<p>那些印在白纸上的灵魂，只要眼睛和理智接触了它，他就会活起来</p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-heart4"></i>
						</span>
						<div class="desc">
							<h3><a href="#">社科图书</a></h3>
							<p>我虽然不活在你的时代，但是我愿意贴近你的思想和灵魂</p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-banknote"></i>
						</span>
						<div class="desc">
							<h3><a href="#">儿童图书</a></h3>
							<p>我想给你的不仅仅是童话，而是一整个美丽可爱的世界</p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-lab2"></i>
						</span>
						<div class="desc">
							<h3><a href="#">教学教辅</a></h3>
							<p>我希望你学到更多的知识，懂得更多的道理，做更优秀的人 </p>
						</div>
					</div>
				</div>
			
			</div>
		</div>
	</div>
	
	<div id="fh5co-counter" class="fh5co-counters" style="background-image: url(${pageContext.request.contextPath}/images/img_bg_4.jpg);" data-stellar-background-ratio="0.5">
		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="row">
						<div class="col-md-3 col-sm-6 text-center animate-box">
							<span class="icon"><i class="icon-world"></i></span>
							<span class="fh5co-counter js-counter" data-from="0" data-to="3297" data-speed="5000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">书目总数</span>
						</div>
						<div class="col-md-3 col-sm-6 text-center animate-box">
							<span class="icon"><i class="icon-study"></i></span>
							<span class="fh5co-counter js-counter" data-from="0" data-to="19" data-speed="500" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">书目类别</span>
						</div>
						<div class="col-md-3 col-sm-6 text-center animate-box">
							<span class="icon"><i class="icon-bulb"></i></span>
							<span class="fh5co-counter js-counter" data-from="0" data-to="5034" data-speed="5000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">交易订单</span>
						</div>
						<div class="col-md-3 col-sm-6 text-center animate-box">
							<span class="icon"><i class="icon-head"></i></span>
							<span class="fh5co-counter js-counter" data-from="0" data-to="1080" data-speed="5000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">注册用户</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<div id="fh5co-course">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2>上新书目</h2>
					<p>初次见面，我是这里的新成员，那么现在你可以和我开始一段新的旅程吗？</p>
				</div>
			</div>
			<div class="row">
			
			
		<c:forEach  var="temp" begin="1" end="4">
<div class="col-md-6 animate-box">
					<div class="course">
					 
					
						<a href="#" class="course-img" style="background-image: url(${pageContext.request.contextPath}/images/${list[temp].id}.jpg);">
						</a>
						<div class="desc">
							<h3><a href="#">${list[temp].name}</a></h3>
							<h4>${list[temp].author}</h4>
							<p>${list[temp].description}</p>
							<span><a href="${pageContext.request.contextPath}/goods/seeGoods.do?id=${list[temp].id}" class="btn btn-primary btn-sm btn-course">查看详情</a></span>
						</div>
					</div>
				</div>   	
</c:forEach>




			</div>
		</div>
	</div>
<div id="fh5co-testimonial" style="background-image: url(${pageContext.request.contextPath}/images/school.jpg);">
		<div class="overlay"></div>
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2><span>开啃项目团队</span></h2>
				</div>
			</div>
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="row animate-box">
						<div class="owl-carousel owl-carousel-fullwidth">
							<div class="item">
								<div class="testimony-slide active text-center">
									<div class="user" style="background-image: url(${pageContext.request.contextPath}/images/person.tian.jpg);"></div>
									<span>田雪莹<br><small>组长</small></span>
									<blockquote>
										<p>&ldquo;书比爱人忠心，比亲人有趣，比烟酒，博彩深邃，书比宗教调皮却又比巫术庄重，他让我们不必离开人的世界，就能坐拥天堂和地狱&rdquo;</p>
									</blockquote>
								</div>
							</div>
							<div class="item">
								<div class="testimony-slide active text-center">
									<div class="user" style="background-image: url(${pageContext.request.contextPath}/images/person.wang.jpg);"></div>
									<span>王启帆<br><small>项目经理</small></span>
									<blockquote>
										<p>&ldquo;修养之余心境，其重要犹如食物之于身体&rdquo;</p>
									</blockquote>
								</div>
							</div>
							<div class="item">
								<div class="testimony-slide active text-center">
									<div class="user" style="background-image: url(${pageContext.request.contextPath}/images/person.chen.jpg);"></div>
									<span>陈红霖<br><small>设计人员</small></span>
									<blockquote>
										<p>&ldquo;我愿成为瞎子，从此我们都没有光明，我不能行走，你不能苏醒&rdquo;</p>
									</blockquote>
								</div>
							</div>
							<div class="item">
								<div class="testimony-slide active text-center">
									<div class="user" style="background-image: url(${pageContext.request.contextPath}/images/person.cui.jpg);"></div>
									<span>崔博文<br><small>主研人员</small></span>
									<blockquote>
										<p>&ldquo;对于忠告，你所能做的都是把它奉送给别人，他从来不是为自己准备的&rdquo;</p>
									</blockquote>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<footer id="fh5co-footer" role="contentinfo" style="background-image: url(${pageContext.request.contextPath}/images/img_bg_4.jpg);">
		<div class="overlay"></div>
		<div class="container">
			<div class="row row-pb-md">
				<div class="col-md-3 fh5co-widget">
					<h3>关于开啃</h3>
					<p>我们竭尽所能的为您提供所有的好书，无论是购买还是欣赏，我们都欢迎您的加入</p>
				</div>
				<div class="col-md-3 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget">
					<h3>网站服务</h3>
					<ul class="fh5co-footer-links">
						<li><a href="#">书籍搜索</a></li>
						<li><a href="#">书目分类</a></li>
						<li><a href="#">书籍购买</a></li>
						<li><a href="#">好书欣赏</a></li>
						<li><a href="#">留言评论</a></li>
					</ul>
				</div>

				<div class="col-md-3 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget">
					<h3>书籍分类</h3>
					<ul class="fh5co-footer-links">
						<li><a href="#">外国文学</a></li>
						<li><a href="#">幼儿教育</a></li>
						<li><a href="#">教辅图书</a></li>
						<li><a href="#">现代文学</a></li>
						<li><a href="#">古代文学</a></li>
					</ul>
				</div>

				<div class="col-md-3 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget">
					<h3>联系我们</h3>
					<ul class="fh5co-footer-links">
						<li><a href="#">站内留言</a></li>
						<li><a href="#">发送邮件</a></li>
						<li><a href="#">商品评论</a></li>
						<li><a href="#">电话服务</a></li>
					</ul>
				</div>

			</div>

		</div>
	</footer>
	</div>


	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="${pageContext.request.contextPath}/js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="${pageContext.request.contextPath}/js/jquery.waypoints.min.js"></script>
	<!-- Stellar Parallax -->
	<script src="${pageContext.request.contextPath}/js/jquery.stellar.min.js"></script>
	<!-- Carousel -->
	<script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>
	<!-- Flexslider -->
	<script src="${pageContext.request.contextPath}/js/jquery.flexslider-min.js"></script>
	<!-- countTo -->
	<script src="${pageContext.request.contextPath}/js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/magnific-popup-options.js"></script>
	<!-- Count Down -->
	<script src="${pageContext.request.contextPath}/js/simplyCountdown.js"></script>
	<!-- Main -->
	<script src="${pageContext.request.contextPath}/js/main.js"></script>
	<script>
    var d = new Date(new Date().getTime() + 1000 * 120 * 120 * 2000);

    // default example
    simplyCountdown('.simply-countdown-one', {
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate()
    });

    //jQuery example
    $('#simply-countdown-losange').simplyCountdown({
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate(),
        enableUtc: false
    });
	</script>
	</body>
</html>


